<template>
  <myHeader :crumbs="crumbs"></myHeader>
  <div class="result-main">
    <div class="percentage">
      <el-progress type="dashboard" :stroke-width="10" color="#FF9001" :width="311" :percentage="30">
        <div class="percentage-value">{{ infoData.score }}<sup class="percentage-value-i">分</sup></div>
        <div class="percentage-label">{{ infoData.status === 1 ? '超时' : infoData.status === 2 ? '不合格' : infoData.status
          === 3 ? '合格' : '未完成' }}</div>
      </el-progress>
    </div>
    <div class="info">
      <div class="data">
        <div class="right">答对<span>{{ correctNum }}</span></div>
        <div class="wrong">答错<span>{{ errorNum }}</span></div>
        <div class="un">未答<span>{{ notdoneNum }}</span></div>
        <div class="time">用时<span>{{ convertSecondsToHMS(infoData.examSecond / 1000) }}</span></div>
      </div>
      <div class="Text">
        <p>您已打败全国{{ (infoData.rankWeight * 100).toFixed(2) }}%用户，请再接再厉。</p>
        <a href="javascript:;" @click="qrcodeVisible = true">想要查看试卷详情</a>
      </div>
    </div>
    <a @click="jumpFn({ url: `/${route.params.type}/${route.params.subject}/exam` })" class="button">再考一次</a>
    <el-image-viewer v-if="qrcodeVisible" :url-list="[qrcodeUrl]" @close="qrcodeVisible = false"></el-image-viewer>
  </div>
</template>

<script setup>
import myHeader from '@/components/header.component.vue';
import { ElMessage, ElMessageBox } from "element-plus";
import { ref, getCurrentInstance } from "vue";
const { $api } = getCurrentInstance().appContext.config.globalProperties;
const infoData = ref({})
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()
import { convertSecondsToHMS } from '@/utils/util.js';
const correctNum = ref(0)
const errorNum = ref(0)
const notdoneNum = ref(0)
const qrcodeVisible = ref(false)
const examSetting = ref({})
const qrcodeUrl = ref('https://api.jkb100.com/api/wx/qrcode.jpg?page=pages/userCenter/exam&envVersion=release')
const crumbs = ref([{
  name: '考试结果',
  url: ''
}])

// 获取考试结果
const getInfoFn = () => {
  $api.getRecordApi({
    id: route.params.id
  }).then((res) => {
    if (res.errno === 0) {
      correctNum.value = res.result.exerciseList.filter(x => x.answer && x.answer === x.correctAnswer).length;
      errorNum.value = res.result.exerciseList.filter(x => x.answer && x.answer !== x.correctAnswer).length;
      notdoneNum.value = res.result.exerciseList.filter(x => !x.answer).length;
      infoData.value = res.result;
      return false;
    }
    ElMessage.error(res.errmsg)
  })
}
getInfoFn()
// 获取科目考试配置
const getSubjectExamConfig = () => {
  if (localStorage.getItem('token')) {
    $api.getSubjectApi({
      subjectId: route.params.subject
    }).then((res) => {
      if (res.errno === 0) {
        if (res.result && res.result.examSetting) {
          examSetting.value = res.result.examSetting;
        } else {
          ElMessageBox.confirm('当前科目习题未开设', '系统提示', {
            showClose: false,
            showCancelButton: false,
            confirmButtonText: '我已知晓'
          }).catch(() => { })
        }
        return false;
      }
      ElMessage.error(res.errmsg)
    })
  }
}
getSubjectExamConfig()
// 再考一次
const jumpFn = (val) => {
  if (localStorage.getItem('token')) {
    if (Object.keys(examSetting.value).length > 0) {
      localStorage.setItem('examSetting', JSON.stringify(examSetting.value))
      router.replace(val.url)
    } else {
      ElMessageBox.confirm('当前科目习题未开设', '系统提示', {
        showClose: false,
        showCancelButton: false,
        confirmButtonText: '我已知晓'
      }).catch(() => { })
    }
  } else {
    router.replace('/login')
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/result.css';

.percentage {
  text-align: center;
  padding-top: 60px;
}

.percentage-value {
  font-size: 66px;
  font-weight: 600;
  line-height: 50px;
  color: #101D37;
  margin-bottom: 11px;
}

.percentage-value-i {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  color: #101D37;
}

.percentage-label {
  font-size: 30px;
  font-weight: 600;
  text-align: center;
  color: #101D37;
}

.result-main .info {
  margin-top: 0;
}

.result-main {
  height: auto;
  padding-bottom: 60px;
}
</style>